import React, {useEffect, useState} from "react";
import {Avatar, Button, Card, Form, Toast, Upload} from "@douyinfe/semi-ui";
import {IconCamera} from '@douyinfe/semi-icons';
import './index.css'
import {UserControllerService, UserVo} from "../../../service";
import {FileItem} from "@douyinfe/semi-ui/lib/es/upload";
import {resourcePath} from "../../../config";

interface customRequestProps {
    // 当前文件名称
    fileName: string,
    // 用户设置的props.data
    data: object,
    // FileItem，具体结构参考下面的文档
    file: FileItem,
    // original File Object which extends Blob, 浏览器实际获取到的文件对象(https://developer.mozilla.org/zh-CN/docs/Web/API/File)
    fileInstance: File,
    // 上传过程中应调用的函数，event需要包含 total、loaded属性
    onProgress: (event: { total: number, loaded: number }) => any,
    // 上传出错时应调用的函数
    onError: (userXhr: { status: number }, e: any) => any,
    // 上传成功后应调用的函数, response为上传成功后的请求结果
    onSuccess: (response: any, e?: any) => any,
    // 用户设置的props.withCredentials
    withCredentials: boolean,
    // 用户设置的props.action
    action: string,
}

const UserInformationView: React.FC = () => {
    const [userInformation,setUserInformation]=useState<UserVo>();
    const [formApi, setFormApi] = useState<object>();
    const mockRequest = async ({file, fileInstance,onProgress, onError, onSuccess}:customRequestProps) => {
        const res= await UserControllerService.updateUserAvatar({
            file: fileInstance,
        })
        if(res.code!=200){
            Toast.error("头像更新失败："+res.message);
            return;
        }
        Toast.info({"content": "头像更新成功"});
        loadData();
    };
    const getFormApi = (formapi: object) => {
        setFormApi(formapi);
    }
    const handleSubmit=async ()=>{
        const res=await UserControllerService.updateUserInformation({
            //@ts-ignore
            ...formApi.getValues(),
        });
        if(res.code!=200){
            Toast.error("数据更新失败："+res.message);
            return;
        }
        Toast.info({"content": "更新成功"});
        loadData();
    }
    const loadData=async ()=>{
        const res=await UserControllerService.getCurrentUserVo();
        if(res.code!=200){
            Toast.error("数据加载失败："+res.message);
            return;
        }
        setUserInformation(res.data);
    }
    useEffect(()=>{
        loadData();
    },[])
    return <>
        <div className={'userInformationViewContainer'}>
            <Upload
                className="avatar-upload"
                onSuccess={() => {
                }}
                // accept={'image/*'}
                showUploadList={false}
                customRequest={mockRequest}
                onError={() => Toast.error('上传失败')}
            >
                <Avatar size={"large"} src={resourcePath+userInformation?.userAvatar} style={{margin: 4}} hoverMask={<div>
                    <IconCamera/>
                </div>}/>
            </Upload>
            {userInformation &&
                <Form
                    getFormApi={getFormApi}
                    initValues={{
                        'userName': userInformation?.userName,
                    }}
                    onSubmit={handleSubmit}
                >
                    <Form.Input label={"昵称"} field={'userName'}/>
                    <Button htmlType="submit">提交</Button>
                </Form>
            }

        </div>
    </>;
}
export default UserInformationView;
